<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租赁合同管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">租赁合同管理</div>
            
            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" @click="createContract">新建合同</el-button>
                <el-button type="success" @click="onlineSign">在线签约</el-button>
                <el-button @click="refreshData">刷新数据</el-button>
            </div>

            <!-- 合同筛选 -->
            <div class="filter-section">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-select v-model="filterForm.status" placeholder="合同状态" clearable>
                            <el-option label="草稿" value="draft"></el-option>
                            <el-option label="待签约" value="pending"></el-option>
                            <el-option label="已签约" value="signed"></el-option>
                            <el-option label="执行中" value="executing"></el-option>
                            <el-option label="已完成" value="completed"></el-option>
                            <el-option label="已解约" value="terminated"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-date-picker
                            v-model="filterForm.dateRange"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="6">
                        <el-input v-model="filterForm.keyword" placeholder="合同编号/设备编号/客户名称" clearable></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="searchContracts">查询</el-button>
                        <el-button @click="resetFilter">重置</el-button>
                    </el-col>
                </el-row>
            </div>

            <!-- 合同列表 -->
            <div class="contract-list">
                <el-table :data="contractData" border style="width: 100%">
                    <el-table-column prop="contractNo" label="合同编号" width="140"></el-table-column>
                    <el-table-column prop="customerName" label="客户名称" width="120"></el-table-column>
                    <el-table-column prop="equipmentInfo" label="设备信息" width="200"></el-table-column>
                    <el-table-column prop="rentalPeriod" label="租赁期限" width="160"></el-table-column>
                    <el-table-column prop="totalAmount" label="合同金额(元)" width="120"></el-table-column>
                    <el-table-column prop="status" label="合同状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="getStatusType(scope.row.status)">
                                {{ getStatusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="signDate" label="签约日期" width="120"></el-table-column>
                    <el-table-column label="操作" width="220">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="viewContract(scope.row)">查看</el-button>
                            <el-button size="mini" type="primary" v-if="scope.row.status === 'draft'" @click="editContract(scope.row)">编辑</el-button>
                            <el-button size="mini" type="success" v-if="scope.row.status === 'pending'" @click="signContract(scope.row)">签约</el-button>
                            <el-button size="mini" type="warning" v-if="scope.row.status === 'executing'" @click="renewContract(scope.row)">续约</el-button>
                            <el-button size="mini" type="danger" v-if="['executing', 'signed'].includes(scope.row.status)" @click="terminateContract(scope.row)">解约</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 合同详情对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="contractDialogVisible" width="80%">
            <div v-if="selectedContract">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="基本信息" name="basic">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="contract-info">
                                    <h4>合同信息</h4>
                                    <p><strong>合同编号：</strong>{{ selectedContract.contractNo }}</p>
                                    <p><strong>合同状态：</strong>{{ getStatusText(selectedContract.status) }}</p>
                                    <p><strong>签约日期：</strong>{{ selectedContract.signDate || '未签约' }}</p>
                                    <p><strong>合同金额：</strong>¥{{ selectedContract.totalAmount }}</p>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="customer-info">
                                    <h4>客户信息</h4>
                                    <p><strong>客户名称：</strong>{{ selectedContract.customerName }}</p>
                                    <p><strong>联系电话：</strong>{{ selectedContract.customerPhone }}</p>
                                    <p><strong>联系地址：</strong>{{ selectedContract.customerAddress }}</p>
                                </div>
                            </el-col>
                        </el-row>
                        
                        <div class="equipment-info">
                            <h4>设备信息</h4>
                            <p><strong>设备信息：</strong>{{ selectedContract.equipmentInfo }}</p>
                            <p><strong>租赁期限：</strong>{{ selectedContract.rentalPeriod }}</p>
                            <p><strong>交付地点：</strong>{{ selectedContract.deliveryLocation }}</p>
                            <p><strong>归还地点：</strong>{{ selectedContract.returnLocation }}</p>
                        </div>
                    </el-tab-pane>
                    
                    <el-tab-pane label="合同条款" name="terms">
                        <div class="contract-terms">
                            <h4>租赁条款</h4>
                            <div class="terms-content">
                                <p><strong>第一条 租赁物件</strong></p>
                                <p>甲方同意向乙方出租{{ selectedContract.equipmentInfo }}，设备编号为{{ selectedContract.equipmentNo }}。</p>
                                
                                <p><strong>第二条 租赁期限</strong></p>
                                <p>租赁期限为{{ selectedContract.rentalPeriod }}，自{{ selectedContract.startDate }}起至{{ selectedContract.endDate }}止。</p>
                                
                                <p><strong>第三条 租金及支付方式</strong></p>
                                <p>租金总额为人民币{{ selectedContract.totalAmount }}元，采用{{ selectedContract.paymentMethod }}方式支付。</p>
                                
                                <p><strong>第四条 设备使用规范</strong></p>
                                <p>乙方应按照设备操作规程正确使用租赁设备，不得超载、超温度范围使用。</p>
                                
                                <p><strong>第五条 设备维护</strong></p>
                                <p>租赁期间设备的日常维护由乙方负责，重大维修由甲方承担。</p>
                                
                                <p><strong>第六条 违约责任</strong></p>
                                <p>任何一方违约，违约方应承担相应的法律责任和经济损失。</p>
                            </div>
                        </div>
                    </el-tab-pane>
                    
                    <el-tab-pane label="操作记录" name="history">
                        <el-timeline>
                            <el-timeline-item 
                                v-for="record in selectedContract.operationHistory" 
                                :key="record.id"
                                :timestamp="record.timestamp"
                                :color="record.color">
                                <p>{{ record.operation }}</p>
                                <p class="operator">操作人：{{ record.operator }}</p>
                            </el-timeline-item>
                        </el-timeline>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="contractDialogVisible = false">关闭</el-button>
                <el-button type="primary" v-if="selectedContract && selectedContract.status === 'pending'" @click="signContract(selectedContract)">立即签约</el-button>
                <el-button type="warning" v-if="selectedContract && selectedContract.status === 'executing'" @click="renewContract(selectedContract)">申请续约</el-button>
            </span>
        </el-dialog>

        <!-- 在线签约对话框 -->
        <el-dialog title="在线签约" :visible.sync="signDialogVisible" width="60%">
            <el-form ref="signForm" :model="signForm" :rules="signRules" label-width="120px">
                <el-form-item label="选择合同" prop="contractId">
                    <el-select v-model="signForm.contractId" placeholder="请选择待签约合同" style="width: 100%">
                        <el-option 
                            v-for="contract in pendingContracts" 
                            :key="contract.contractNo" 
                            :label="`${contract.contractNo} - ${contract.customerName}`" 
                            :value="contract.contractNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="签约方式" prop="signMethod">
                    <el-radio-group v-model="signForm.signMethod">
                        <el-radio label="electronic">电子签名</el-radio>
                        <el-radio label="digital">数字证书</el-radio>
                        <el-radio label="sms">短信验证</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="验证码" prop="verifyCode" v-if="signForm.signMethod === 'sms'">
                    <el-input v-model="signForm.verifyCode" placeholder="请输入验证码" style="width: 200px;"></el-input>
                    <el-button type="text" @click="sendVerifyCode">发送验证码</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="signDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmSign">确认签约</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    filterForm: {
                        status: '',
                        dateRange: [],
                        keyword: ''
                    },
                    contractData: [
                        {
                            contractNo: 'CT-HY202401001',
                            customerName: '衡阳湘莲合作社',
                            equipmentInfo: '湘D版湘莲专用冷藏车(8吨)',
                            equipmentNo: 'HY-CRC001',
                            rentalPeriod: '30天',
                            startDate: '2024-01-15',
                            endDate: '2024-02-14',
                            totalAmount: 18000,
                            status: 'executing',
                            signDate: '2024-01-10',
                            customerPhone: '138****1234',
                            customerAddress: '衡阳市蒸湘区湘莲种植基地',
                            deliveryLocation: '衡阳市雁农冷链仓储中心',
                            returnLocation: '衡阳市雁农冷链仓储中心',
                            paymentMethod: '月付',
                            operationHistory: [
                                { id: 1, timestamp: '2024-01-15 09:00', operation: '合同开始执行', operator: '系统自动', color: '#67C23A' },
                                { id: 2, timestamp: '2024-01-10 14:30', operation: '合同签约完成', operator: '李经理', color: '#409EFF' },
                                { id: 3, timestamp: '2024-01-08 10:00', operation: '合同创建', operator: '张业务员', color: '#909399' }
                            ]
                        },
                        {
                            contractNo: 'CT-HY202401002',
                            customerName: '衡阳祁东黄花菜专业合作社',
                            equipmentInfo: '湘D版黄花菜专用冷藏集装箱(20英尺)',
                            equipmentNo: 'HY-CC001',
                            rentalPeriod: '15天',
                            startDate: '2024-02-01',
                            endDate: '2024-02-15',
                            totalAmount: 4500,
                            status: 'pending',
                            signDate: '',
                            customerPhone: '139****5678',
                            customerAddress: '衡阳市祁东县黄花菜产业园',
                            deliveryLocation: '衡阳市珠晖区物流园',
                            returnLocation: '衡阳市珠晖区物流园',
                            paymentMethod: '预付',
                            operationHistory: [
                                { id: 1, timestamp: '2024-01-20 16:20', operation: '等待客户签约', operator: '系统自动', color: '#E6A23C' },
                                { id: 2, timestamp: '2024-01-20 10:00', operation: '合同发送客户', operator: '王业务员', color: '#409EFF' },
                                { id: 3, timestamp: '2024-01-18 14:00', operation: '合同创建', operator: '王业务员', color: '#909399' }
                            ]
                        },
                        {
                            contractNo: 'CT-HY202401003',
                            customerName: '衡阳南岳茶油加工厂',
                            equipmentInfo: '湘D版茶油专用移动冷库(50立方米)',
                            equipmentNo: 'HY-MW001',
                            rentalPeriod: '90天',
                            startDate: '2024-03-01',
                            endDate: '2024-05-30',
                            totalAmount: 45000,
                            status: 'signed',
                            signDate: '2024-02-25',
                            customerPhone: '137****9012',
                            customerAddress: '衡阳市南岳区茶油加工产业园',
                            deliveryLocation: '衡阳市蒸湘区雁农特产仓储中心',
                            returnLocation: '衡阳市蒸湘区雁农特产仓储中心',
                            paymentMethod: '季付',
                            operationHistory: [
                                { id: 1, timestamp: '2024-02-25 11:30', operation: '合同签约完成', operator: '陈经理', color: '#67C23A' },
                                { id: 2, timestamp: '2024-02-20 09:00', operation: '合同条款确认', operator: '陈经理', color: '#409EFF' },
                                { id: 3, timestamp: '2024-02-15 15:00', operation: '合同创建', operator: '刘业务员', color: '#909399' }
                            ]
                        }
                    ],
                    currentPage: 1,
                    pageSize: 10,
                    total: 3,
                    contractDialogVisible: false,
                    selectedContract: null,
                    dialogTitle: '',
                    activeTab: 'basic',
                    signDialogVisible: false,
                    signForm: {
                        contractId: '',
                        signMethod: 'electronic',
                        verifyCode: ''
                    },
                    signRules: {
                        contractId: [{ required: true, message: '请选择合同', trigger: 'change' }],
                        signMethod: [{ required: true, message: '请选择签约方式', trigger: 'change' }]
                    }
                }
            },
            computed: {
                pendingContracts() {
                    return this.contractData.filter(contract => contract.status === 'pending');
                }
            },
            methods: {
                getStatusType(status) {
                    const typeMap = {
                        'draft': 'info',
                        'pending': 'warning',
                        'signed': 'success',
                        'executing': 'primary',
                        'completed': 'success',
                        'terminated': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                getStatusText(status) {
                    const textMap = {
                        'draft': '草稿',
                        'pending': '待签约',
                        'signed': '已签约',
                        'executing': '执行中',
                        'completed': '已完成',
                        'terminated': '已解约'
                    };
                    return textMap[status] || '未知';
                },
                searchContracts() {
                    // 模拟搜索逻辑
                    this.$message.success('查询完成');
                },
                resetFilter() {
                    this.filterForm = {
                        status: '',
                        dateRange: [],
                        keyword: ''
                    };
                },
                refreshData() {
                    this.$message.success('数据已刷新');
                },
                createContract() {
                    this.$message.info('跳转到合同创建页面');
                },
                onlineSign() {
                    this.signDialogVisible = true;
                },
                viewContract(row) {
                    this.selectedContract = row;
                    this.dialogTitle = '合同详情 - ' + row.contractNo;
                    this.contractDialogVisible = true;
                    this.activeTab = 'basic';
                },
                editContract(row) {
                    this.$message.info('跳转到合同编辑页面');
                },
                signContract(row) {
                    this.$confirm('确认签约合同 ' + row.contractNo + ' 吗？', '签约确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        row.status = 'signed';
                        row.signDate = new Date().toISOString().split('T')[0];
                        this.$message.success('合同签约成功');
                        this.contractDialogVisible = false;
                    }).catch(() => {
                        this.$message.info('已取消签约');
                    });
                },
                renewContract(row) {
                    this.$prompt('请输入续约期限（天）', '续约申请', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^\d+$/,
                        inputErrorMessage: '请输入有效的天数'
                    }).then(({ value }) => {
                        this.$message.success(`续约申请已提交，续约期限：${value}天`);
                        this.contractDialogVisible = false;
                    }).catch(() => {
                        this.$message.info('已取消续约');
                    });
                },
                terminateContract(row) {
                    this.$confirm('确认解约合同 ' + row.contractNo + ' 吗？解约后将无法恢复。', '解约确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        row.status = 'terminated';
                        this.$message.success('合同解约成功');
                        this.contractDialogVisible = false;
                    }).catch(() => {
                        this.$message.info('已取消解约');
                    });
                },
                sendVerifyCode() {
                    this.$message.success('验证码已发送');
                },
                confirmSign() {
                    this.$refs.signForm.validate((valid) => {
                        if (valid) {
                            const contract = this.contractData.find(c => c.contractNo === this.signForm.contractId);
                            if (contract) {
                                contract.status = 'signed';
                                contract.signDate = new Date().toISOString().split('T')[0];
                                this.$message.success('在线签约成功');
                                this.signDialogVisible = false;
                                this.signForm = {
                                    contractId: '',
                                    signMethod: 'electronic',
                                    verifyCode: ''
                                };
                            }
                        }
                    });
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                }
            }
        });
    </script>

    <style scoped>
        .action-buttons {
            margin-bottom: 20px;
        }
        
        .filter-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .contract-list {
            margin-bottom: 20px;
        }
        
        .pagination-wrapper {
            text-align: center;
            padding: 20px 0;
        }
        
        .contract-info, .customer-info, .equipment-info {
            margin-bottom: 20px;
        }
        
        .contract-info h4, .customer-info h4, .equipment-info h4 {
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .contract-info p, .customer-info p, .equipment-info p {
            margin: 10px 0;
            line-height: 1.6;
        }
        
        .terms-content {
            line-height: 1.8;
            color: #666;
        }
        
        .terms-content p {
            margin: 15px 0;
        }
        
        .operator {
            color: #999;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
</body>
</html>